<template>
  <Layout>
    <section class="p-5 bg-white mb-5">
      <el-form
        ref="queryForm"
        label-width="120px"
        class="flex flex-wrap"
        :model="originQuery"
      >
        <el-form-item
          class="w-4/12"
          label="创建人"
          prop="createById"
        >
          <el-select
            v-model="originQuery.createById"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in createByList"
              :key="item.userId"
              :value="item.userId"
              :label="item.userName"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="w-4/12"
          label="消息类型"
          prop="messageType"
        >
          <el-select
            v-model="originQuery.messageType"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in messageTypeList"
              :key="index"
              :value="index"
              :label="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="w-4/12"
          label="通知方式"
          prop="notifyMethod"
        >
          <el-select
            v-model="originQuery.notifyMethod"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in notifyMethodList"
              :key="index"
              :value="index"
              :label="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="w-4/12"
          label="消息状态"
          prop="messageStatus"
        >
          <el-select
            v-model="originQuery.messageStatus"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in [
                { value: false, label: '待发布' },
                { value: true, label: '已发布' },
              ]"
              :key="index"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="w-4/12"
          label="通知对象"
          prop="notifyObject"
        >
          <el-select
            v-model="originQuery.notifyObject"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in [
                { value: 0, label: '全体用户' },
                { value: 1, label: '指定公司' },
              ]"
              :key="index"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="w-4/12"
          label="创建时间"
          prop="__dateRange$createStart$createEnd"
        >
          <el-date-picker
            v-model.trim="
              originQuery.__dateRange$createStart$createEnd
            "
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="() => handleQuery({ num: 1 })"
          >
            查询
          </el-button>
          <el-button @click="handleReset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </section>
    <section>
      <el-button
        type="primary"
        class="mb-5"
        @click="handleClickNew"
      >
        新增
      </el-button>
      <el-table
        ref="table"
        :data="tableList"
        border
      >
        <el-table-column
          align="center"
          label="序号"
          type="index"
          :index="(index) => query.size * (query.num - 1) + index + 1"
          width="80"
        />
        <el-table-column
          label="创建人"
          prop="createBy"
        />
        <el-table-column
          label="创建时间"
          prop="createTime"
        />
        <el-table-column
          label="消息类型"
          prop="messageType"
        >
          <template #default="{ row }">
            <span>
              {{ messageTypeList[row.messageType] || '其他' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="通知方式"
          prop="notifyMethod"
        >
          <template #default="{ row }">
            <span>
              {{ notifyMethodList[row.notifyMethod] || '其他' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="消息形式"
          prop="messageForm"
        >
          <template #default="{ row }">
            <span>
              {{ messageFormList[row.messageForm] || '其他' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="消息状态"
          prop="messageStatus"
        >
          <template #default="{ row }">
            <span v-if="row.messageStatus">已发布</span>
            <span v-else>待发布</span>
          </template>
        </el-table-column>
        <el-table-column
          label="通知对象"
          prop="notifyObject"
        >
          <template #default="{ row }">
            <span v-if="row.notifyObject">指定公司</span>
            <span v-else>全体用户</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <span
              v-if="row.messageStatus"
              class="cursor-pointer"
              style="margin-left: 10px; color: #006aff"
              @click="handleWatch(row)"
            >查看
            </span>
            <template v-else>
              <span
                class="cursor-pointer"
                style="margin-left: 10px; color: #006aff"
                @click="handleEdit(row)"
              >编辑
              </span>
              <span
                class="cursor-pointer"
                style="margin-left: 10px; color: red"
                @click="handleDel(row)"
              >删除
              </span>
              <span
                class="cursor-pointer"
                style="margin-left: 10px; color: green"
                @click="handlePublic(row)"
              >发布
              </span>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="text-center py-4">
        <el-pagination
          v-model:current-page="query.num"
          background
          :total="total"
          :page-size="query.size"
          @current-change="handlePageChange"
        />
      </div>
    </section>
    <MessageDialog
      ref="MessageDialog"
      @ok="handleFinish"
    />
  </Layout>
</template>

<script>
import Layout from '@/layout/index.vue'
import MessageDialog from './messageDialog.vue'
import {
    queryMessageList,
    getMessageCreateBy,
    delOneMessage,
    publicMessage
} from '@/api/message'

export default {
    components: {
        Layout,
        MessageDialog
    },
    data() {
        return {
            query: {
                num: 1,
                size: 10
            },
            originQuery: {},
            tableList: [],
            createByList: [],
            total: 0
        }
    },
    computed: {
        messageTypeList() {
            return ['系统公告', '新功能介绍']
        },
        messageFormList() {
            return ['无', '纯文本', '纯图片', '图文结构化', '多图文消息']
        },
        notifyMethodList() {
            return ['推送号', '弹框']
        }
    },
    created() {
        this.init()
    },
    methods: {
        async init() {
            this.handleQuery()
            this.getCreateBy()
        },
        handlePageChange() {
            this.searchFunc()
        },
        handleFinish() {
            this.searchFunc()
            this.getCreateBy()
        },
        handleClickNew() {
            this.$refs.MessageDialog.showDialog(null, 'add')
        },
        handleEdit(row) {
            this.$refs.MessageDialog.showDialog(row, 'edit')
        },
        handleWatch(row) {
            this.$refs.MessageDialog.showDialog(row, 'readonly')
        },
        async handlePublic(row) {
            try {
                await this.$confirm('确定发布吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                await publicMessage({ messageId: row.id })
                this.$message.success('发布成功')
                this.searchFunc()
            } catch {
                //
            }
        },
        async handleDel(row) {
            try {
                await this.$confirm('确定删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                await delOneMessage(row.id)
                this.$message.success('删除成功')
                this.searchFunc()
                this.getCreateBy()
            } catch {
                //
            }
        },
        async getCreateBy() {
            let res = await getMessageCreateBy()
            this.createByList = res.data.filter((i) => i)
        },
        async handleQuery() {
            this.query = { ...this.query, ...this.originQuery }
            this.query.num = 1
            this.searchFunc()
        },
        async searchFunc() {
            let res = await queryMessageList({ ...this.query })
            this.total = res.data.total
            this.tableList = res.data.records
        },
        handleReset() {
            this.query = {
                num: 1,
                size: 10
            }
            this.originQuery = {}
            this.handleQuery()
        }
    }
}
</script>
<style scoped>
.gray {
    color: gray;
}
</style>
